<div>
  <div nz-row class="mb30">
    <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="add()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
    </button>
  </div>

  <nz-table #basicTable [nzData]="list"
            [nzLoading]="loading" [nzShowPagination]="false"
            [nzFrontPagination]="false"
  >
    <thead>
    <tr>
      <th>描述</th>
      <th>源数据库</th>
      <th>目标数据库</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{ data.description }}</td>
      <td>jdbc:mysql://{{data.fromHost}}:{{data.fromPort}}</td>
      <td>jdbc:mysql://{{data.toHost}}:{{data.toPort}}</td>
      <td>
        <a (click)="edit(data.id)">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="copy(data.id)">复制</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="delete(data.id)">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
